<template>
   <div class="box">
       <div class="dh">
             <div class="left">
                <span>{{ name1 }}</span>
            </div>
            <div class="search">
                <img src="../../src/assets/sousuo.png" alt="">
                <span class="sp1">{{name2}}</span>
            </div>
            <div class="right">
                <img src="../../src/assets/zuobiao.png" alt="">
            </div>
        </div>
        <div class="sq">
            <div class="meituan">
                <img src="../../src/assets/meituan.png" alt="">
                <p class="p1">省钱利器 购物超划算</p>
                <p class="p2">吃喝玩乐尽在美团</p>
            </div>
            <div class="you">
                {{name5}}
            </div>
        
        </div>
        <div class="fl">
            <ul>
                <li><a href="#">
                    <img src="../assets/meishi.png" alt="">
                    <span>美食</span>
                </a></li>
                <li><a href="#">
                    <img src="../assets/dianying.png" alt="">
                    <span>猫眼电影</span>
                </a></li><li><a href="#">
                    <img src="../assets/jiudian.png" alt="">
                    <span>酒店</span>
                </a></li><li><a href="#">
                    <img src="../assets/xiuxian.png" alt="">
                    <span>休闲娱乐</span>
                </a></li><li><a href="#">
                    <img src="../assets/waimai.png" alt="">
                    <span>外卖</span>
                </a></li><li><a href="#">
                    <img src="../assets/ktv.png" alt="">
                    <span>KTV</span>
                </a></li><li><a href="#">
                    <img src="../assets/zby.png" alt="">
                    <span>周边游</span>
                </a></li><li><a href="#">
                    <img src="../assets/liren.png" alt="">
                    <span>丽人</span>
                </a></li><li><a href="#">
                    <img src="../assets/qinzi.png" alt="">
                    <span>母婴亲子</span>
                </a></li><li><a href="#">
                    <img src="../assets/quanbu.png" alt="">
                    <span>全部分类</span>
                </a></li>
                
            </ul>
        </div>
        <div class="cnxh">
            <div class="xh">
                <h5>猜你喜欢</h5>
            </div>
            <div class="sp">
                <img src="../assets/蜜学冰城.jpg" alt="">
                <div class="t1">
                    <p>蜜学冰城</p>
                    <p class="t11">[多城市]招牌柠檬水</p>
                    <span class="sp1">3.33</span>元
                    <span></span>
                    <span class="sp2">&nbsp;门市价:￥4</span>
                </div>
            </div>
            <div class="sp">
                <img src="../assets/香辣虾.png" alt="">
                <div class="t1">
                    <p>理想大虾</p>
                    <p class="t11">[23店通用]甄选双人餐</p>
                    <span class="sp1">98</span>元
                    <span></span>
                    <span class="sp2">&nbsp;门市价:￥189</span>
                </div>
            </div>
            <div class="sp">
                <img src="../assets/自助烤肉.png" alt="">
                <div class="t1">
                    <p>蚝仙炙荣记海鲜烧烤大排档</p>
                    <p class="t11">[南窑头/北窑头]</p>
                    <span class="sp1">89</span>元
                    <span></span>
                    <span class="sp2">&nbsp;门市价:￥198</span>
                </div>
            </div>
            <div class="sp">
                <img src="../assets/泡馍.png" alt="">
                <div class="t1">
                    <p>清真老马家泡馍馆</p>
                    <p class="t11">[大皮院店]羊肉泡馍小炒单人餐 2 选 1</p>
                    <span class="sp1">18.8</span>元
                    <span></span>
                    <span class="sp2">&nbsp;门市价:￥35</span>
                </div>
            </div>
            <div class="sp">
                <img src="../assets/蛋糕.jpg" alt="">
                <div class="t1">
                    <p>味极鲜蛋糕</p>
                    <p class="t11">[4店通用]蛋糕 4 选 1</p>
                    <span class="sp1">29.9</span>元
                    <span></span>
                    <span class="sp2">&nbsp;门市价:￥60</span>
                </div>
            </div>
            <div class="sp">
                <img src="../assets/华莱士.jpg" alt="">
                <div class="t1">
                    <p>华莱士·全鸡汉堡</p>
                    <p class="t11">[多城市]【上新】经典重温2-3人餐</p>
                    <span class="sp1">29.9</span>元
                    <span></span>
                    <span class="sp2">&nbsp;门市价:￥73</span>
                </div>
            </div>
            <div class="sp">
                <img src="../assets/小笼包.jpg" alt="">
                <div class="t1">
                    <p>赵记笼笼肉夹饃</p>
                    <p class="t11">[2店通用]擀面皮</p>
                    <span class="sp1">4.9</span>元
                    <span></span>
                    <span class="sp2">&nbsp;门市价:￥8</span>
                </div>
            </div>
        </div>
        <div class="bx-1">
            <div class="ck">
                &nbsp;&nbsp;查看全部团购
            </div>
            <div class="db">
                <div class="dl">
                    <div class="dl1">
                        登录
                    </div>
                    <div class="dl2">
                        <span>城市:</span>
                        <img src="../assets/定位.png" alt="">
                        <span>&nbsp;西安</span>
                    </div>
                </div>
                <div class="sy">
                    <ul>
                        <li>
                            <a href="#">首页</a>

                        </li>
                        <li>
                            <span>|</span>
                        </li>
                        <li>
                            <a href="#">我的</a>
                        </li>
                        <li>
                            <span>|</span>
                        </li>
                        <li>
                            <a href="#">美团下载</a>
                        </li>
                        <li>
                            <span>|</span>
                        </li>
                        <li>
                            <a href="#">电脑版</a>
                        </li>
                        <li>
                            <span>|</span>
                        </li>
                        <li>
                            <a href="#">帮助</a>
                        </li>
                    </ul>
                </div>
                <div class="lj">
                    <p>友情链接：猫眼电影 <span>大众点评</span><span>美团旅行</span><span>榛果民宿</span></p>
                    <p><span class="lj1">大众点评下载</span>
                        <span>美团餐饮系统</span>
                        <span>美团餐饮培训</span>
                    </p>
                    <p>
                        <span class="lj2">快驴进货商家合作</span>
                        <span>商机/招聘</span>
                    </p>
                </div>
                <div class="mtw">
                    <div class="x1"></div>
                    <div class="x2">©2022 美团网 京ICP证070791号</div>
                    <div class="x3"></div>

                </div>

            </div>

        </div>
 </div>
</template>

<script>
export default {
    data(){
        return{
            name1:"西安  ∨",
            name2:" 请输入商家名、品类或者商圈",
            name5:"去APP"
        }
    }
}
</script>

<style scoped>
     .box{
        width: 100%;
        height: auto;
        background-color:#f6f7fa;
        overflow: hidden;
        
    }
    .dh{
        width: 375px;
        height: 50px;
        background-color: #ffd000;
        margin: auto;
        padding: 0 15px;
        
    }
    .box .left{
        /* margin-left: 20px; */
        line-height: 50px;
    }
    .box .search{
        margin-left: 30px;
        width: 250px;
        height: 32px;
        background-color: #fff;
        margin-left: 60px;
        margin-top: -40px;
        border-radius: 10px;
    }
    .box .search img{
        width: 13px;
        height: 14px;
        margin-left: 10px;
        margin-top: 8px;
    }
    .box .sp1{
        font-size: 13px;
        color: #999;
    }
    .box .right{
        margin-left: 320px;
        margin-top: -27px;
        /* float: right; */
    }
    .box .right img{
        width: 24px;
        height: 24px;
    }
    .box .sq{
        width: 375px;
        height: 53px;
        overflow: hidden;
        background-color: #000;
    }
    .box .meituan {
        width: 180px;
        height: 36px;
        /* background-color: blue; */
        margin-top: 7px;
        margin-left: 15px;
    }
    .box .meituan img{
        width: 36px;
        height: 36px;
        
    }
    .box .p1{
        margin-left: 46px;
        margin-top: -40px;
        font-size: 13px;
        color: #fff;
        font-weight: 700;
    }
    .box .p2{
        margin-left: 46px;
        margin-top: 4px;
        font-size: 12px;
        color: #fff;
    }
    .box .you{
        width: 50px;
        height: 30px;
        background-color: #ffbd00;
        float: right;
        margin-top: -30px;
        margin-right: 15px;
        line-height: 30px;
        font-size: 12px;
        color: #333;
        text-align: center;
        border-radius: 10px;
    }
    .box .fl{
        width: 375px;
        height: 170px;
        background-color: #fff;
        margin: auto;
        overflow: hidden;
        /* padding: 0 25px; */
    }
    .box .fl ul li{
        width: 49px;
        text-align: center;
        height: 65px;
        margin-left: 10px;
        margin-bottom: 10px;
        margin-right: 10px;
        margin-top: 10px;
    }
    .box .fl ul{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        
    }
    .box .fl ul li img {
        width: 42px;
        height: 42px;
    }
    .box .fl ul li a {
        font-size: 12px;
        color: #333;
    }
    .box .xh {
        width: 375px;
        height: 600px;
        /* background-color: yellowgreen; */
        margin-top: 10px;
    }
    .box .cnxh {
            width: 375px;
            height: auto;
            background-color: #fff;
        }
        
        .box .xh {
            width: 355px;
            height: 46px;
            /* background-color: rgb(182, 208, 208); */
            margin: auto;
            line-height: 46px;
            border-bottom: 1px solid #ddd8ce;
            margin-top: 10px;
        }
        
        .box .xh h5 {
            font-size: 16px;
        }
        
        .box .cnxh .sp {
            width: 354px;
            height: 98px;
            /* background-color: burlywood; */
            margin: auto;
            overflow: hidden;
            border-bottom: 1px solid #ddd8ce;
        }
        
        .box .cnxh .sp img {
            display: block;
            width: 100px;
            height: 82px;
            margin-top: 10px;
            float: left;
        }
        
        .box .cnxh .sp .t1 {
            width: 200px;
            height: 98px;
            float: left;
            font-size: 12px;
            margin-left: 10px;
            color: #ff6600;
            /* background-color: cornflowerblue; */
        }
        
        .box .cnxh .sp .t1 p {
            line-height: 42px;
            color: #000;
            font-size: 16px;
        }
        
        .box .cnxh .sp .t1 .t11 {
            font-size: 12px;
            color: #666666;
            line-height: 0;
        }
        
        .box .cnxh .sp .t1 .sp1 {
            font-size: 18px;
            color: #ff6600;
            line-height: 80px;
        }
        
        .box .cnxh .sp .t1 .sp2 {
            font-size: 12px;
            color: #666666;
        }
        
        .box .box-1 {
            width: 375px;
            height: auto;
            background-color: #fff;
            margin: auto;
        }
        
        .box .ck {
            width: 375px;
            height: 41px;
            background-color: #fff;
            margin: auto;
            border-bottom: 1px solid #ddd8ce;
            line-height: 41px;
            font-size: 15px;
            color: #fe8c00;
            
        }
        
        .box .db {
            width: 375px;
            height: 218px;
            background-color: #fff;
            margin: auto;
            overflow: hidden;
        }
        
        .box .db .dl {
            width: 324px;
            height: 41px;
            /* background-color: teal; */
            margin: auto;
            overflow: hidden;
            margin-top: 10px;
        }
        
        .box .db .dl .dl1 {
            width: 55px;
            height: 27px;
            background-color: #ffbd00;
            text-align: center;
            line-height: 2;
            border: 1px solid #ffbd00;
            border-radius: 10px;
            font-size: 13px;
            margin-top: 5px;
            float: left;
        }
        
        .box .db .dl .dl2 {
            width: 80px;
            height: 26px;
            float: right;
            /* background-color: wheat; */
            margin-top: 13px;
            /* line-height: 12px; */
        }
        
        .box .db .dl .dl2 span:nth-child(1) {
            font-size: 13px;
            color: #999;
        }
        
        .box .db .dl .dl2:nth-child(2) {
            font-size: 13px;
            margin-top: 8px;
        }
        
        .box .db .dl .dl2 img {
            width: 12px;
            height: 14px;
            margin-top: 3px;
            line-height: 10px;
            margin-left: 5px;
        }
        
        .box .db .sy {
            width: 324px;
            height: 26px;
            /* background-color: rgb(168, 199, 199); */
            margin: auto;
            overflow: hidden;
            margin-top: 10px;
        }
        
        .box .db .sy ul {
            display: flex;
            justify-content: space-between;
        }
        
        .box .db .sy ul li a {
            font-size: 12px;
            color: #fe8c00;
        }
        
        .box .db .sy ul li span {
            font-size: 12px;
        }
        
        .db .lj {
            width: 324px;
            height: 78px;
            margin: auto;
            /* background-color: rgb(234, 217, 226); */
            margin-top: 18px;
        }
        
        .db .lj p {
            font-size: 12px;
            padding: 0 16px;
            margin-bottom: 6px;
            color: #646464;
        }
        
        .db .lj span {
            margin: 0 6px;
            color: #646464;
        }
        
        .db .lj .lj1 {
            margin-left: 24px;
        }
        
        .db .lj .lj2 {
            margin-left: 70px;
        }
        
        .db .mtw {
            width: 324px;
            height: 16px;
            /* background-color: rgb(227, 220, 219); */
            margin: auto;
            margin-top: 4px;
            font-size: 12px;
            color: #999;
            text-align: center;
            overflow: hidden;
        }
        
        .db .mtw .x1 {
            width: 60px;
            height: 1px;
            background-color: #000;
            ;
            margin-top: 7px;
            float: left;
        }
        
        .db .mtw .x2 {
            width: 204px;
            height: auto;
            float: left;
        }
        
        .db .mtw .x3 {
            width: 60px;
            height: 1px;
            background-color: #000;
            margin-top: 7px;
            float: right;
        }
</style>